<template>
  <div class="tp">
    <Header />

    <Content>
      <div class="cp">
        <div class="card">
          <BasicForm @register="registerFilter" @submit="onSearch">
            <template #advanceBefore>
              <a-button danger @click="onBatchSelect">批量选用</a-button>
            </template>
          </BasicForm>

          <a-tabs v-model:activeKey="state.search.cateType" type="line">
            <a-tab-pane v-for="o in proCategoryType" :key="o.value" :tab="o.label">
              <BasicTable @register="state[o.value].registerTable" :resizeHeightOffset="44">
                <template #action="{ record }">
                  <TableAction
                    :divider="true"
                    :actions="[
                      !record.selectionStatus && {
                        color: 'success',
                        label: '选用',
                        onClick: () => onSingleSelect(record),
                      },
                    ]"
                  />
                </template>
              </BasicTable>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </Content>

    <SingleSelect @register="registerDetail" @complete="onSearch" />
  </div>
</template>

<script setup>
  import { defineOptions, h, nextTick, onMounted, reactive, ref, watch } from 'vue';

  import { useRouter } from 'vue-router';
  import { useDrawer } from '@/components/Drawer';

  import { BasicTable, TableAction, useTable } from '@/components/Table';

  import SingleSelect from './single-select.vue';
  import Header from '@/widget/header.vue';
  import Content from '@/widget/content.vue';
  import { PAGE, POST_API } from '@/api/http';
  import { getLabel, proCategoryType, proSelectStatus } from '@/api/ds';
  import { BasicForm, useForm } from '@/components/Form/index';
  import ProImgCell from '@/widget/pro-img-cell.vue';

  defineOptions({ name: 'ProBrand' });

  const [registerDetail, { openDrawer }] = useDrawer();

  const router = useRouter();
  const cateParams = ref({ cateSubName: null, status: 1 });

  const [registerFilter, filter] = useForm({
    baseColProps: { style: { paddingRight: '12px' } },
    actionColOptions: { span: 9 },
    submitOnReset: true,
    schemas: [
      {
        field: 'goodsName',
        component: 'Input',
        componentProps: {
          placeholder: ' 输入商品名称搜索',
        },
        colProps: { span: 5 },
      },
      {
        field: 'cateCode',
        component: 'ApiSelect',

        componentProps: {
          placeholder: '商品分类',
          valueField: 'cateCode',
          labelField: 'cateSubName',
          showSearch: true,
          filterOption: false,
          api: POST_API('/product/libCategoryCommonListAll'),
          params: cateParams,
          onSearch: (value) => {
            cateParams.value.cateSubName = value;
          },
        },

        colProps: { span: 5 },
      },
      {
        field: 'selectStatus',
        component: 'Select',
        componentProps: {
          placeholder: '选用状态',
          options: proSelectStatus,
        },
        colProps: { span: 5 },
      },
    ],
  });

  const [registerTableP, tableP] = useTable({
    api: PAGE('/product/productLibrary'),
    immediate: false,
    beforeFetch: (arg) => getSearchArg(arg),
    columns: [
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        ellipsis: false,
        width: 290,
        customRender: ({ value: title, record }) =>
          h(ProImgCell, { src: record.goodsImage, title }),
      },

      {
        title: '商品分类',
        dataIndex: 'libCategoryName',
        ellipsis: false,
      },
      {
        title: '规格',
        dataIndex: 'specs',
        ellipsis: false,
      },
      {
        title: '建议零售价',
        dataIndex: 'salePrice',
        ellipsis: false,
      },
      {
        title: '选用状态',
        dataIndex: 'selectionStatus',
        ellipsis: false,
        customRender: ({ value }) => getLabel(proSelectStatus, value ? 1 : 0),
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'id',
    actionColumn: {
      title: '操作',
      align: 'center',
      width: 120,
      dataIndex: 'action',
      fixed: 'right',
      slots: { customRender: 'action' },
    },
  });

  const [registerTableS, tableS] = useTable({
    api: PAGE('/product/serviceLibrary'),
    immediate: false,
    beforeFetch: (arg) => getSearchArg(arg),
    columns: [
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        ellipsis: false,
        width: 290,
        customRender: ({ value: title, record }) =>
          h(ProImgCell, { src: record.goodsImage, title }),
      },

      {
        title: '商品分类',
        dataIndex: 'libCategoryName',
        ellipsis: false,
      },
      {
        title: '服务时长',
        dataIndex: 'duration',
        ellipsis: false,
        customRender: ({ value }) => `${value || 0}分钟`,
      },
      {
        title: '建议零售价',
        dataIndex: 'salePrice',
        ellipsis: false,
      },
      {
        title: '选用状态',
        dataIndex: 'selectionStatus',
        ellipsis: false,
        customRender: ({ value }) => getLabel(proSelectStatus, value ? 1 : 0),
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'id',
    actionColumn: {
      title: '操作',
      align: 'center',
      width: 120,
      dataIndex: 'action',
      fixed: 'right',
      slots: { customRender: 'action' },
    },
  });

  const state = reactive({
    search: {
      cateType: 'P',
    },
    P: {
      registerTable: registerTableP,
      table: tableP,
    },
    S: {
      registerTable: registerTableS,
      table: tableS,
    },
  });

  function getSearchArg(arg) {
    return Object.assign(arg, filter.getFieldsValue());
  }

  onMounted(() => {
    nextTick(onSearch);
  });

  watch(
    () => state.search.cateType,
    () => nextTick(onSearch),
  );

  function onBatchSelect() {
    router.push('/basics/brand/batch-select');
  }

  function onSingleSelect(record) {
    const { cateType } = state.search;
    openDrawer(true, { cateType, record });
  }

  async function onSearch() {
    const { cateType } = state.search,
      target = state[cateType];

    target.table.reload();
    target.table.redoHeight();
  }
</script>
<style lang="less" scoped>
  .card {
    padding: 12px;
  }

  :deep(.ant-tabs-nav) {
    margin: 0 8px 8px;
  }
</style>
